<template>
  <div class="BaseBreadcrumb-container">
    <div
      v-if="breadcrumb && !$route.query.hasOwnProperty('taskDefKey')"
      class="breadcrumb-wrapper"
    >
      <a-breadcrumb>
        <a-icon
          type="home"
          style="margin-right: 6px;"
        />
        <a-breadcrumb-item
          v-for="item in activeBreadcrumb"
          :key="item.code"
        >
          <template v-if="!!item.url">
            <span
              style="cursor: pointer;"
              @click="$router.push(item.value)"
            >{{item.name}}</span>
          </template>
          <template v-else>{{item.name}}</template>
        </a-breadcrumb-item>
      </a-breadcrumb>
      <!-- <a-breadcrumb :routes="routes">
        <template
          slot="itemRender"
          slot-scope="{ route, params, routes }"
        >
          <span v-if="routes.indexOf(route) === routes.length - 1">
            {{ title || route.title
                        }}{{ state ? state === 1 ? '新增' : state === 2 ? '编辑' : '详情' : '' }}
          </span>
          <span
            v-else-if="route.disabled"
            style="color: #000000;"
          >{{ route.title }}</span>
          <router-link
            v-else
            :to="{ path: route.path || '/', params: params }"
            class="pre-breadcrumb"
          >
            {{ route.title }}
          </router-link>
        </template>
      </a-breadcrumb> -->
    </div>
    <!-- 审批页面取消固定高度 -->
    <div
      :style="{height:isAudit?'auto':'calc('+GET_REDRESS_PERCENTAGE+'vh - 174px)',marginTop:isAudit?'20px':'',overflow: isAudit? 'initial':'hidden auto', paddingRight: '12px'}"
      class="content-bx"
    >
      <slot name="content" />
      <slot />
    </div>
  </div>
</template>

<script>
import { mapState,mapGetters } from 'vuex'

export default {
  name: 'BaseBreadcrumb',
  props: {
    // 可使用该值替换面包屑最后一级的名字
    title: {
      type: String,
      default: ''
    },
    // 传值false时，不显示面包屑；传值为数组时，用该数组生成面包屑(eg：[{path:'/index', breadcrumbName: '首页'}])
    breadcrumb: {
      type: [Array, Boolean],
      default: true
    },
    //传了这个字段，会在最后一节上自动加上新增、编辑、详情，对应的值为1，2，3
    state: {
      type: Number,
      default: null
    }
  },
  data() {
    return {
      activeBreadcrumb: []
    }
  },
  computed: {
    ...mapState({
      menus: (state) => state.user.menus,
      activeCodes: (state) => state.user.activeCodes,
      pathMap: (state) => state.tabInfo.pathMap
    }),
    ...mapGetters(['GET_REDRESS_PERCENTAGE']),
    isNextPage() {
      const { path, query } = this.$route
      const pathArr = path?.split('/')
      if (!pathArr || !pathArr.length) return false
      if (pathArr[pathArr.length - 1] === 'add' || pathArr[pathArr.length - 1] === 'edit' || query.editModel > -1 || !!query.pageType) {
        return true
      }
      return false
    },
    routes() {
      const { meta, matched, fullPath } = this.$route
      let routes = []

      const pathMap = this.$store.getters['tabInfo/GET_PATHMAP']
      if (pathMap) {
        let res = pathMap.find((v) => v.fullPath === fullPath)
        if (res) {
          routes = res.history
        }
      } else {
        routes = matched.concat().map(function (route, index) {
          return {
            disabled: index < 2, // 禁止前两级跳转
            path: route.path,
            title: route.meta.title
          }
        })
        // 添加parent的路由信息
        if (meta && meta.parent) {
          routes.splice(routes.length - 1, 0, {
            path: meta.parent.path,
            title: meta.parent.title
          })
        }
      }
      routes?.map(function (route, index) {
        route.disabled = index < 1
      })
      // let obj = {}
      // const arr = (
      //   Object.prototype.toString.call(this.breadcrumb) === '[object Array]' ? this.breadcrumb : routes
      // )?.reduce(function (item, next) {
      //   obj[next.componentName] ? '' : (obj[next.componentName] = true && item.push(next))
      //   return item
      // }, [])
      // return arr
      //console.log('routes', routes)
      return Object.prototype.toString.call(this.breadcrumb) === '[object Array]' ? this.breadcrumb : routes
    },
    // 是审批页面(并且不是征询意见)
    isAudit() {
      return this.$route.query.hasOwnProperty('taskDefKey') || this.$route.query?.type === 'approve'
    }
  },
  watch: {
    activeCodes: {
      handler(val) {
        this.activeBreadcrumb = []
        this.getBreadcrumbList(val, this.menus)
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    getBreadcrumbList(codes, list) {
      const data = list.find((item) => codes.some((code) => item.raw.code === code))
      if (data) {
        this.activeBreadcrumb.push(data.raw)
        if (codes.length > 1) {
          const arr = codes.map((item) => item)
          arr.shift()
          this.getBreadcrumbList(arr, data.children)
        }
      }
    }
  }
}
</script>

<style lang="less" scoped>
.BaseBreadcrumb-container {
  padding: 0 0 10px 20px;
  scrollbar-width: none;

  .breadcrumb-wrapper {
    padding: 12px 18px;
    background-color: white;
    border-top: 1px solid #f0f0f0;
    margin-bottom: 12px;
    margin-left: 1px;
    // box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.12);
    cursor: default;
    .pre-breadcrumb {
      color: #018fe0;
    }
  }
}
</style>
